<% if (props.stylingPackage?.name === "nativewind") { %>
import './global.css';
<% } %>
import React from 'react';

<% if (props.stylingPackage?.name === "nativewind") {%>
  	import { Text, View } from 'react-native';
<% } else if (props.stylingPackage?.name === "tamagui") {%>
  	import { View } from 'react-native';
	import { TamaguiProvider, Text, styled } from 'tamagui';
	import config from './tamagui.config'
<% } else if (props.stylingPackage?.name === "restyle") {%>
  import { ThemeProvider } from '@shopify/restyle';
  import {theme, Text} from './theme';
<% } else if (props.stylingPackage?.name === "unistyles") {%>
  import { createStyleSheet, useStyles } from 'react-native-unistyles'
  import { Text, View } from 'react-native';
<% } else {%>
  	import { StyleSheet, Text, View } from 'react-native';
<% } %>

import { StatusBar } from 'expo-status-bar';

<% if (props.stylingPackage?.name === "nativewind") {%>
  export default function App() {
		return (
			<View className={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
        <StatusBar style="auto" />
      </View >
    );
	}

	const styles = {
		container: 'flex flex-1 items-center justify-center bg-white',
	};
<% } else if (props.stylingPackage?.name === "tamagui") {%>
  	const MyView = styled(View, {
		name: "MyView",
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	});

	export default function App() {
		return (
			<TamaguiProvider config={config}>
				<MyView>
					<Text>Open up App.tsx to start working on your app!</Text>
					<StatusBar style="auto" />
				</MyView>
			</TamaguiProvider >
    	);
	}
<% } else if (props.stylingPackage?.name === "restyle") {%>
    export default function App() {
      return (
        <ThemeProvider theme={theme}>
          <Text>Open up App.tsx to start working on your app!</Text>
          <StatusBar style="auto" />
        </ThemeProvider>
      );
    }
<% } else if (props.stylingPackage?.name === "unistyles") {%>
  	export default function App() {
    const {styles} = useStyles(stylesheet)
		return (
			<View style={styles.container}>
				<Text>Open up App.tsx to start working on your app!</Text>
				<StatusBar style="auto" />
			</View >
    	);
	}

	const stylesheet = createStyleSheet({
		container: {
			flex: 1,
			backgroundColor: '#fff',
			alignItems: 'center',
			justifyContent: 'center',
		},
	});
<% } else {%>
  	export default function App() {
		return (
			<View style={styles.container}>
				<Text>Open up App.tsx to start working on your app!</Text>
				<StatusBar style="auto" />
			</View >
    	);
	}

	const styles = StyleSheet.create({
		container: {
			flex: 1,
			backgroundColor: '#fff',
			alignItems: 'center',
			justifyContent: 'center',
		},
	});
<% } %>